<script setup lang="ts">
    import { reactive, ref, onMounted } from 'vue'//引入vue函数
    import type { Goods } from '@/model' //引入自定义数据类型
    import { getGoodsList, delGoods } from '@/api' //商品接口
    import GoodsEdit from './components/GoodsEdit.vue' //添加修改商品对话框
    import { ElMessage, ElMessageBox } from 'element-plus' //导入消息框
    

    //表格数据对象
    const tableData = ref<Goods[]>([])
    //表格原始数据
    const oldData = ref<Goods[]>([])

    //分页变量
    const currentPage = ref(1)//当前页
    const pageSize = ref(5)//每页显示记录数
    const totalRow = ref(0)//总记录数

    //是否显示 添加修改商品对话框
    const isShowDialog =  ref(false)

    //添加修改商品对话框的标题
    const dialogTitle = ref("新增商品")

    //当前将要修改的商品
    const goods = reactive({
        id:0,
        name:"",
        category_id:"",
        description:"",
        picture:"",
        price:"",
        spec:"",
        stock:""
    })

    //定义表单数据对象
    const searchForm = reactive({
        name:""
    });

    //搜索关键字
    const keyword = ref("")

    //查询所有商品
    async function loadGoodsList(page:number){
        const params = {
            page,
            pagesize:pageSize.value,
            search:keyword.value
        };
        const res = await getGoodsList(params)
        totalRow.value = res.data.data.total
        oldData.value = res.data.data.list
        tableData.value = res.data.data.list
    }

    //表单搜索
    function searchGoods(){
        keyword.value = searchForm.name
        currentPage.value = 1
        loadGoodsList(currentPage.value)
    }

    //表单重置
    function resetForm(){
        keyword.value = ""
        searchForm.name = ""
        currentPage.value = 1
        //显示第1页的数据列表
        loadGoodsList(1)
    }

    //点击分页按扭
    function changePage(page:number){
        currentPage.value = page
        loadGoodsList(page)
    }

    //添加商品
    function addGoods(){
        dialogTitle.value = "新增商品"
        goods.id = 0
        goods.name = ""
        goods.category_id = ""
        goods.description = ""
        goods.picture = ""
        goods.price = ""
        goods.spec = ""
        goods.stock = ""
        isShowDialog.value = true
    }

    //修改商品
    function updateGoods(data:Goods){
        dialogTitle.value = "修改商品"
        Object.assign(goods, data)
        isShowDialog.value = true
    }

    //删除商品
    function deleteGoods(data:Goods){
        //确认对话框
        ElMessageBox.confirm("确定要删除此商品吗？", {
            closeOnClickModal: true,
            confirmButtonText: "确定",
            cancelButtonText: "取消",
        }).then(async ()=>{
            const res = await delGoods({id:data.id})
            if(res.data.errno == 0){
                //重置搜索表单
                resetForm()
                //删除成功
                ElMessage.success(res.data.errmsg)
            }
            else{
                //删除失败
                ElMessage.error(res.data.errmsg)
            }
        }).catch(()=>{
            //console.log("点击了取消按扭")
        })
    }

    //关闭对话框
    function closeDialog(){
        isShowDialog.value = false
        currentPage.value = 1
        loadGoodsList(currentPage.value)
    }

    //组件加载完成
    onMounted(()=>{
        currentPage.value = 1
        loadGoodsList(currentPage.value)
    })
</script>

<template>

    <!--搜索表单-->
    <section class="search">
        <el-form :inline="true">
            <el-form-item label="商品名称">
                <el-input v-model="searchForm.name" style="width:200px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchGoods">搜索</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </section>

    <!--表格显示内容-->
    <section class="goods_page">
        <div><el-button type="primary" @click="addGoods">新增商品</el-button></div>
        <div>
            <!--表格-->
            <el-table :data="tableData" row-key="id" style="width:100%" border>
                <!--空数据时显示内容-->
                <template #empty>暂无数据</template>
                <!--表格有数据时的显示内容-->
                <el-table-column prop="id" label="商品编号" width="100"></el-table-column>
                <el-table-column prop="name" label="商品名称"></el-table-column>
                <el-table-column prop="price" label="商品价格" width="100"></el-table-column>
                <el-table-column prop="stock" label="商品库存" width="100"></el-table-column>
                <el-table-column prop="description" label="商品简介">
                    <template #default="scope">
                        <!--replace函数，用于过滤HTML代码-->
                        <el-text line-clamp="2">{{ scope.row.description.replace(/<\/?[^>]+(>|$)/g, "") }}</el-text>
                    </template>
                </el-table-column>
                <el-table-column label="商品图片" width="100">
                    <template #default="scope">
                        <img :src="scope.row.picture" />
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-button type="warning" @click="updateGoods(scope.row)">编辑</el-button>
                        <el-button type="danger" @click="deleteGoods(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--分页栏-->
        <div>
            <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="totalRow" v-model:current-page="currentPage" @change="changePage" />
        </div>
    </section>

    <!--新增商品、修改商品，对话框-->
    <el-dialog v-model="isShowDialog" :title="dialogTitle" width="700">
        <GoodsEdit :is-show="isShowDialog" :goods="goods" @closeDialog="closeDialog"></GoodsEdit>
    </el-dialog>

</template>

<style scoped>
    .goods_page, .search{
        background:#FFFFFF;
        border-radius: 5px;
        box-shadow: 0px 0px 5px 5px #E4E7ED;
        margin:20px;
        border:1px solid transparent;
    }
    .search{
        height:50px;
        padding-left:20px;
        display:flex;
        align-items: center;
    }
    .search .el-form-item{
        margin-top:0px;
        margin-bottom:0px;
    }
    .goods_page > div{
        margin:20px;
    }
    .goods_page img{
        width:50px;
        height:50px;
    }
</style>
